<!-- 头部数据列表 -->
<template>
  <section class="data_top">
    <div class="data_top_l">
      <el-icon><Tickets /></el-icon>
      <span>数据列表</span>
    </div>
    <div class="data_top_r">
      <el-button @click="addFn">添加</el-button>
    </div>
  </section>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from 'vue';
let emit = defineEmits<{
  (event: 'showPopup', message: string): void;
}>();
function addFn() {
  emit('showPopup', 'addRole');
}
</script>
<style lang="less" scoped>
.data_top {
  margin-top: 20px;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .data_top_l {
    display: flex;
    align-items: center;
    font-size: 18px;
    :deep(.el-icon) {
      font-size: 20px;
      margin-top: 1px;
    }
  }
}
</style>
